<template>
  <div class="page-content">
    <el-dialog
      class="thedialog"
      :title="title"
      :visible.sync="dialogVisible"
      width="900px"
      :before-close="closeform"
      :close-on-click-modal="false"
    >
      <div slot="title" class="head">
        <div class="frame-title" style="float: left">
          <h4 style="float: left; margin: 20px">生产统计</h4>
        </div>
        <div class="frame-body" style="float: left">
          <div class="inner-body">
            <div class="chart1"></div>
            <div class="chart2"></div>
            <div class="chart3"></div>
            <div class="chart4"></div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "Statistics",
  props: {
    dialogVisible: {
      Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: "生产统计",
    };
  },
  
  methods: {
    //鸽子孵化率
    ChartNum1() {
      let myChart = this.$echarts.init(document.querySelector(".chart1"));
      window.onresize = function () {
        myChart.resize();
      };
      let data = [];
      for (let i = 0; i < 5; ++i) {
        data.push(Math.round(Math.random() * 200));
      }
      let option = {
        title: {
          text: "鸽子孵化率",
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "孵化率",
            type: "bar",
            barWidth: "60%",
            data: [
              0.3, 0.8, 0.67, 0.9, 0.88, 0.78, 0.68, 0.27, 0.36, 0.88, 0.98,
              0.89,
            ],
            type: "line",
            smooth: true,
          },
        ],
      };
      myChart.setOption(option);
    },
    //鸽子死亡数
    ChartNum2() {
      let myChart = this.$echarts.init(document.querySelector(".chart2"));
      window.onresize = function () {
        myChart.resize();
      };
      let option = {
        title: {
          text: "鸽子死亡数",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "死亡数",
            type: "bar",
            barWidth: "60%",
            data: [
              120, 200, 750, 80, 70, 110, 130, 123, 585, 103, 383, 283, 112,
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    //鸽蛋坏死数
    ChartNum3() {
      let myChart = this.$echarts.init(document.querySelector(".chart3"));
      window.onresize = function () {
        myChart.resize();
      };
      let option = {
        title: {
          text: "鸽蛋坏死数",
        },
        xAxis: {},
        yAxis: {},
        series: [
          {
            symbolSize: 20,
            data: [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68],
            ],
            type: "scatter",
          },
        ],
      };
      myChart.setOption(option);
    },
    //种鸽异常数
    ChartNum4() {
      let myChart = this.$echarts.init(document.querySelector(".chart4"));
      window.onresize = function () {
        myChart.resize();
      };
      function randomData() {
        now = new Date(+now - oneDay);
        value = value + Math.random() * 21 - 10;
        return {
          name: now.toString(),
          value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
            Math.round(value),
          ],
        };
      }
      let data = [];
      let now = new Date(2021, 9, 3);
      let oneDay = 24 * 3600 * 1000;
      let value = Math.random() * 1000;
      for (var i = 0; i < 1000; i++) {
        data.push(randomData());
      }
      let option = {
        title: {
          text: "种鸽异常数",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return (
              date.getDate() +
              "/" +
              (date.getMonth() + 1) +
              "/" +
              date.getFullYear() +
              " : " +
              params.value[1]
            );
          },
          axisPointer: {
            animation: false,
          },
        },
        xAxis: {
          type: "time",
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "Fake Data",
            type: "line",
            showSymbol: false,
            data: data,
          },
        ],
      };
      setInterval(function () {
        for (var i = 0; i < 5; i++) {
          data.shift();
          data.push(randomData());
        }
        myChart.setOption({
          series: [
            {
              data: data,
            },
          ],
        });
      }, 1000);

      myChart.setOption(option);
    },
    closeform() {
      var a = false;
      this.$emit("closeDialog", a);
    },
  },
};
</script>

<style scoped>
.head {
  background-color: #2c3e50;
  margin: -20px -30px -100px -30px;
  padding-bottom: 100px;
  border-radius: 7px;
  height: 100px;
}
.el-menu {
  background-color: #2c3e50;
  /* margin: -20px -20px 0px -0px; */
  margin: 0px 20px 0px 100px;
}

.frame-title {
  /* background-color: #d1ff38; */
  color: #f0f0f0;
  width: 100%;
  height: 60px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.frame-body {
  background-color: #e5e9f2;
  /* margin-top: 60px; */
  height: 450px;
  width: 100%;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}
.inner-body {
  float: left;
  margin: 15px;
  background-color: #ffffff;
  height: calc(100% - 30px);
  width: calc(100% - 30px);
}

.inner-body .chart1 {
  float: left;
  left: 0;
  top: 0;
  display: block;
  margin: 10px;
  width: 45%;
  height: 45%;
}
.inner-body .chart2 {
  float: right;
  right: 0;
  top: 0;
  display: block;
  margin: 10px;
  width: 45%;
  height: 45%;
}
.inner-body .chart3 {
  float: left;
  left: 0;
  bottom: 0;
  display: block;
  margin: 10px;
  width: 45%;
  height: 50%;
}
.inner-body .chart4 {
  float: right;
  right: 0;
  bottom: 0;
  display: block;
  margin: 10px;
  width: 45%;
  height: 50%;
}
</style>